<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./CSS/leftStyles.css">
    <link rel="stylesheet" href="./CSS/rightStyle.css">
    <link rel="stylesheet" href="./CSS/inputStyle.css">
    <link rel="stylesheet" href="./CSS/radioStyle.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
       <div class="login-left">
            <!-- logo -->
            <div class="logo"> 
                <span class="logo-text">迈科输血管理系统V3.0</span>
                <span class="logo-text-msg">迈科输血管理系统V3.0</span>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <button id="swiper-prev" class="swiper-prev" aria-label="上一张">
                    <img src="./carousel/left.png" alt="上一张">
                </button>
                <button id="swiper-next" class="swiper-next" aria-label="下一张">
                    <img src="./carousel/right.png" alt="下一张">
                </button>
                <div class="swiper-list">
                    <div class="swiper-items">
                    <div class="item"><img class="img1" src="./carousel/login-icon-two-Ubsi9dyl.svg" alt="图片1"></div>
                    <div class="item"><img class="img2" src="./carousel/login-icon-two1-DH3Hzoiu.svg" alt="图片2"></div>
                    <div class="item"><img class="img3" src="./carousel/login-icon-two2-BxALWFnT.svg" alt="图片3"></div>
                    </div>
                </div>              
                <ul class="swiper-indexs">
                    <li class="active">
                    </li>
                    <li>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
       </div>

        <div class="login-right">
            <!-- 登录表单 -->
            <div class="login-form"> 
                <form>
                    <h1>测试医院</h1>
                    <!-- 医院地点 -->
                    <div class="location-select" tabindex="0">
                        <div class="location-selected">
                            <img src="./Image/city-one.png" >
                            <div class="location-selected-text">1300000000001</div>
                        </div>
                        <div class="arrow" id="location-arrow" ><img src="./Image/down.png" ></div> 
                        <div class="location-options">
                        </div>
                    </div>  
                    <!-- 科室 -->
                    <div class="department-select" tabindex="1">
                        <div class="department-selected">
                            <img src="./Image/id-card.png">
                            <div class="department-selected-text">医务科</div>
                        </div>
                        <div class="arrow" id="department-arrow"><img src="./Image/down.png" ></div> 
                        <div class="department-options">
                            <div class="department-option" data-value="1">
                                <div class="department-option-text">输血科</div>
                            </div>
                            <div class="department-option" data-value="2">
                                <div class="department-option-text">医生站</div>
                            </div>
                            <div class="department-option" data-value="3">
                                <div class="department-option-text">护士站</div>
                            </div>
                            <div class="department-option" data-value="4">
                                <div class="department-option-text">手麻</div>
                            </div>
                            <div class="department-option" data-value="5">
                                <div class="department-option-text">医务科</div>
                            </div>
                        </div>
                    </div> 
                    <!-- 诊查方式 -->
                    <div class="radio-container">
                        <div class="radio-item">
                            <label>
                              <input type="radio" name="diagnosis" value="hospitalized">
                              <span class="custom-radio"><span>住院</span></span>
                            </label><br>  
                          </div>
                            
                          <div class="radio-item">
                            <label>
                              <input type="radio" name="diagnosis" value="outpatientService" checked>
                              <span class="custom-radio"><span>门诊</span></span>
                            </label><br>
                          </div>
                    </div>
                    <!-- 选则科室 -->
                     <div class="department-number-select" tabindex="2">
                        <div class="department-number-selected">
                            <img src="./Image/digital-watches.png">
                            <div class="department-number-selected-text">1300000000005</div>
                        </div>
                        <div class="arrow" id="department-number-arrow">
                            <img src="./Image/down.png">
                            <img src="./Image/close-one.png" class="delete">
                        </div>
                        <div class="department-number-options">
                        </div>
                     </div>
                
                    <div class="username-group" tabindex="3">
                        <img src="./Image/people.png" >
                        <input type="text" id="username" name="username" placeholder="请输入账号" value="superadmin" required>
                        <div class="error-message">请输入用户名</div>
                    </div>
        
                    <div class="password-group" tabindex="4">
                        <img src="./Image/unlock.png" class="password-icon">
                        <img src="./Image/preview-close-one.png" class="invisible">
                        <input type="password" id="password" name="password" placeholder="请输入密码" value="123qwe" required>
                        <div class="error-message">请输入密码</div>
                    </div>
        
                    <div class="captcha-group" tabindex="5">
                        <img src="./Image/send-one.png" alt="验证码">
                        <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
                        <div class="captcha-container">
                            <img src="captcha.png" class="captcha-img">
                            <div id="expiredText" class="expired-text">验证码已过期</div>
                        </div>
                    </div>
        
                    <button class="login-btn" type="submit">登录</button>
                    
                    <div class="tip">* 温馨提示: 建议使用谷歌、Microsoft Edge, 版本 79.0.1072.62 及以上浏览器, 360浏览器请使用极速模式</div>
                </form>
            </div>
        </div>
    </div>
</body>

<script>
    const baseUrl = 'http://localhost:5006';
</script>
<script src="./JavaScript/loginLeft.js"></script>
<script src="./utils/fetchRequest.js"></script>
<script src="./utils/createDropdown.js"></script>
<script src="./JavaScript/input.js"></script>
<script src="./JavaScript/select.js"></script>
<script src="./JavaScript/radio.js"></script>

</html>
